<!doctype html>
<html class="no-js fixed-layout">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>元旦迎新抽奖</title>
    <meta name="description" content="抽奖页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/LotteryLib/favicon.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
   <!-- <link rel="stylesheet" href="/amaze-css/assets/css/amazeui.css"/>  -->
    <link rel="stylesheet" href="/static/assets/gougu/css/gougu.css?v=4.0.18" media="all">  
    <link href="/LotteryLib/css/lottery.css" rel="stylesheet" type="text/css" />
   

</head>
<body  id="wrapper">
<div class="layui-fluid">
    <div class="layui-row  lottery-main">
        <div class="layui-col-md12">            
            <a href="javascript:;" onClick="screenFun(1)" style="float:right;"><i class="fullScreen layui-icon layui-icon-screen-full"></i>全屏</a>
            <a href="javascript:;" id="fullScreen" onClick="screenFun(1)"><img style="height:100px;margin-top:1px;" src="/LotteryLib/logo2.jpg"> </a>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset4">
         <h1>当前抽奖{$level['award_level']} ：剩余<span id="winner_number">{$level['winner_number']}</span>人</h1>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md3" id="name-parent">
            <button id="name" class="layui-btn layui-btn-radius layui-btn-block"disabled="disabled" >
                 <p>姓名</p>
            </button>
        </div>
        <div class="layui-col-md2 layui-col-md-offset1" id="avatar-parent">           
                <img class="layui-circle " id="lottery-avatar" src="/LotteryLib/JOTUN.jpg"/>            
        </div>
        <div class="layui-col-md6" id="phone-number-parent">
          <button id="phone-number" class="layui-btn layui-btn-radius layui-btn-block">
            手机号码
            </button>  
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md6">
            <button  id="beginLottery" class="layui-btn layui-btn-radius layui-btn-block ">
                            抽奖
            </button>
        </div>
        <div class="layui-col-md6">
<!--            <button  id="stopLottery" class=" am-btn am-btn-deafault am-btn-block am-round">
                            停止
           </button> -->
        </div>
    </div>
    <!--输出中奖用户列表-->
    <div class="layu-row " id="show-lottery">

        <ul class="am-avg-sm-10 layui-thumbnails">

        </ul>

    </div>
 
</div>



<!--     <div class="am-u-sm-1 blog-sidebar">
        <div class="am-panel-bd">
            {volist name="awardList" id="vo"}
                <div class="am-list ">
                    <label class="myFont">                                
                        <p class="myFont" class="myvl" ><strong>{$vo.award_level}</strong></p>
                        <p class="myFont" class="am-text-primary"> {$vo.winner_number}名
                            &nbsp;&nbsp;{$vo.goods_name}</p>
                    </label>
                </div>
            {/volist}
        </div>
    </div> -->
<script src="/LotteryLib/js/jquery-2.1.1.min.js"></script>



<script >
    function screenFun(num) {
        num = num || 1;
        num = num * 1;
        var docElm = document.documentElement;
        switch (num) {
            case 1:
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                } else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                } else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                } else if (docElm.msRequestFullscreen) {
                    docElm.msRequestFullscreen();
                }
                break;
            case 2:
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                break;
        }
        return new Promise(function (res, rej) {
            res("返回值");
        });
    }

   $(document).ready(function(){

               //点击一次开始按钮后如何取消该按钮的禁用状态???????
                var obj;
                var objAll;
                var obj3;
                var i=0;
                var j=0;
                var nowLevel;
                var number={$level['winner_number']};
                if(number == 0){ $('#beginLottery').attr("disabled",true);}//当抽奖剩余人数为0时禁用按钮
               //选择等级事件/*
             /*  $('.mylevel').click(function(){
                    //alert('选择'+ $('input[name="level"]:checked').val()+'?');
                   clearInterval(outLotteryList);
                   $("#lottery-user-list").empty();


               });*/

        //点击开始后,头像和名字快速滚动
        //中奖用户的列表
       $.get("/home/Index/lotteryNowLevel",
               function (data) {
                   nowLevel=data;
                   //alert(nowLevel);
               });

       $.get("/home/Index/lotteryPageAllSignUser",
               function(json1){

                   var dataAll=JSON.parse(json1);//解析json
                   objAll=eval(dataAll);//转变为json对象
                   // alert('所有用户数量'+objAll.length);
                   //到达抽奖的时间后,头像和姓名不滚动.

                   setInterval(outAllList, 300);
               });
       function outAllList(){

           if(j<=objAll.length||j<=obj.length){

               var objAvatar = ' <img class="layui-circle "  id="lottery-avatar" src="' +
                       objAll[j].avatar_url + '" />';
               var objName =  '<button id="name" class="layui-btn layui-btn-radius layui-btn-block" disabled="disabled">'+
                       objAll[j].real_name+'</button>';
               var objPhone ='<button id="phone-number" class="layui-btn layui-btn-radius layui-btn-block"disabled="disabled" >'+
                       objAll[j].phone_number+'</button>';
               j+=1;
               $("#avatar-parent").html(objAvatar);
               $("#name-parent").html(objName);
               $("#phone-number-parent").html(objPhone);
               if(j==objAll.length){               
                   j=0;//循环遍历所有用户
               }
           }
       }

                $('#beginLottery').click(function(){

                    $(".layui-thumbnails").empty();
                    j=1000;
                    i=0;//防止没刷新页面时切换抽奖等级,重置i的值
                    clearInterval(outAllList);//点击开始抽奖时头像滚动切换成抽奖名单
                        //用户头像等信息滚动+中奖用户
                   
                        //一,二,三等奖,头像在最后一个抽奖用户出来时停止滚动
                        $.get("/home/Index/lotteryPageBegin",
                                function(json){
                                    var data=JSON.parse(json);//解析json
                                    obj=eval(data);//转变为json对象
                                     // alert('收到后台的数量'+obj.length);
                                    setInterval(outLotteryList2, 50);
                                     var number=$('#winner_number').text();
                                     number=number-obj.length;
                                     //当数量小于0时刷新页面，防止再次执行
                                     if(number == 0){ $('#beginLottery').attr("disabled",true);}
                                    $('#winner_number').html(number);
                                });
                        function outLotteryList2(){

                            if(i<obj.length){
                                var objAvatar = ' <img class="layui-circle "  id="lottery-avatar" src="' +
                                        obj[i].avatar_url + '" />';
                                var objName =  '<button id="name" class="layui-btn layui-btn-radius layui-btn-block" disabled="disabled">'+
                                        obj[i].real_name+'</button>';
                                var objPhone ='<button id="phone-number" class="layui-btn layui-btn-radius layui-btn-block" disabled="disabled" >'+
                                        obj[i].phone_number+'</button>';
                                var append = '<li >' +
                                        '<img class="layui-thumbnail layui-circle" style="background-color: rgba(255, 255, 255, 0.31);width:150px;height:150px;margin:0px;padding:0px;" src="' + obj[i].avatar_url + '" />' +
                                        '<p style="text-align: center;color:black;font-weight: bolder;margin-top:2px;">'+obj[i].real_name+'</p>' +
                                        '<p style="text-align: center;color:black;font-weight: bolder;">'+obj[i].phone_number+'</p>' +
                                        '</li>';
                                 $("#avatar-parent").html(objAvatar);
                                 $("#name-parent").html(objName);
                                 $("#phone-number-parent").html(objPhone);
                                $(".am-avg-sm-10").append(append);
                                i+=1;

                            }
                          
                        }
                 /*   }else{
                        //alert(nowLevel);
                        //中奖的

                        $.get("?s=/Admin/Index/lotteryPageBegin",
                                function(json){
                                    var data=JSON.parse(json);//解析json
                                    obj=eval(data);//转变为json对象
                                    // alert('收到后台的数量'+obj.length);
                                    setInterval(outLotteryList, 50);
                                });
                        function outLotteryList(){
                            if(i<=obj.length){

                                var append = '<li>' +
                                        '<img class="am-thumbnail am-circle" style="background-color: rgba(255, 255, 255, 0.31);width:150px;height:150px;margin:0px;padding:0px;" src="' + obj[i].avatar_url + '" />' +
                                        '<p style="text-align: center;color:black;font-weight: bolder;margin-top:-2px;">'+obj[i].real_name+'</p>' +
                                        '<p style="text-align: center;color:black;font-weight: bolder;margin-top:-10px;"">'+obj[i].phone_number+'</p>' +
                                        '</li>'
                                $(".am-avg-sm-10").append(append);
                                i+=1;


                            }
                        }
                        //四,五等奖的时候,头像滚动的
                        $.get("?s=/Admin/Index/lotteryPageAllSignUser",
                                function(json1){

                                    var dataAll=JSON.parse(json1);//解析json
                                    objAll=eval(dataAll);//转变为json对象
                                    // alert('所有用户数量'+objAll.length);
                                    //到达抽奖的时间后,头像和姓名不滚动.

                                    setInterval(outAllList, 200);
                                });
                        function outAllList(){

                                if(j<=objAll.length||j<=obj.length){

                                    var objAvatar = ' <img class="am-circle "  id="lottery-avatar" src="' +
                                            objAll[j].avatar_url + '" />';
                                    var objName =  '<div id="name" class="am-btn am-btn-default am-round" disabled="disabled">'+
                                            objAll[j].real_name+'</div>';
                                    var objPhone ='<div id="phone-number" class="am-btn am-btn-default am-round"disabled="disabled" >'+
                                            objAll[j].phone_number+'</div>';
                                    j+=1;
                                    $("#avatar-parent").html(objAvatar);
                                    $("#name-parent").html(objName);
                                    $("#phone-number-parent").html(objPhone);
                                    if(j==obj.length)//循环遍历所有用户
                                        j=objAll.length+1;


                                }
                            }


                        }*/


                });

            }

    );

</script>
</body>
</html>
